<template>
	<view class="outbox">
		<qiun-data-charts type="funnel" :opts="state.opts" :chartData="state.chartData" />
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		onUpdated
	} from "vue";
	const state = reactive({
		bigType: [{
				id: 1,
				name: '餐饮副食',
				number: 0
			},
			{
				id: 2,
				name: '日用百货',
				number: '',
				number: 0
			},
			{
				id: 3,
				name: '休闲娱乐',
				number: 0
			},
			{
				id: 4,
				name: '金融',
				number: 0
			},
			{
				id: 5,
				name: '个人',
				number: 0
			},
			{
				id: 6,
				name: '其它',
				number: 0
			}
		],
		token:'',
		chartData: {},
		//您可以通过修改 config-ucharts.js 文件中下标为 ['funnel'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		opts: {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 15, 0, 15],
			enableScroll: false,
			extra: {
				funnel: {
					activeOpacity: 0.3,
					activeWidth: 10,
					border: true,
					borderWidth: 2,
					borderColor: "#FFFFFF",
					fillOpacity: 1,
					labelAlign: "left",
					type: "pyramid"
				}
			}
		},
		list:[],
		typeNum:null
	})
	// 父组件传值
	const prop = defineProps({
		dataList: {
			type: Array
		},
		typeNum:{
			type: Number
		}
	})
	// 生命周期
	onMounted(() => {
	})
	onUpdated(()=>{
		if(prop.dataList.length<1){
			
		}else{
			if(JSON.stringify(prop.dataList) == JSON.stringify(state.list) && JSON.stringify(prop.typeNum) == JSON.stringify(state.typeNum)){
				
			}else{
				updataMap(prop.typeNum-1);
				state.list = prop.dataList
				state.typeNum = prop.typeNum
			}
		}
		
	})
	// 更新ucharts区域图
	const updataMap = (id)=>{
		let num = id || 0;
		let arr = Object.entries(prop.dataList[2][num]);
		arr.sort((a,b)=>{
			return b[1]-a[1]
		})
		let datas = [];
		for(let i=0;i<arr.length;i++){
			let obj = {};
			obj.name = arr[i][0];
			obj.value = arr[i][1];
			obj.centerText = arr[i][1].toString();
			datas.push(obj);
		}
		state.chartData  = {}
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				series: [{
					data: datas
				}]
			};
			state.chartData = JSON.parse(JSON.stringify(res));
		}, 500);
	}
</script>

<style lang="less" scoped>
	.outbox {
		width: 100%;
		height: 500rpx;
	}
</style>